<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//动态绑定
			window.onload=function(){
				var d=document.getElementById("d1");
				//IE不支持
				d.addEventListener("click",function(){
					alert(this.innerHTML);
				});
				d.onmouseover=function(){
					//this
					this.style.fontSize="90px";
				}
				d.onmouseout=function(){
					this.style.fontSize="14px";
				}
			}
			function m1(event){
				alert("li");
				//event=event|e;
				event.stopPropagation();
			}
			function m2(){
				alert("ul"); 
			}
			function m3(){
				alert("div"); 
			}
		</script>
	</head>
	<body>
		<div id="d1">
			We change lives!
		</div>
		<div id="d2" onclick="m3()" style="cursor: pointer;" >
			 <ul onclick="m2()">
			 	<li onclick="m1(event)">冒泡</li>
			 </ul>
		</div>	
	</body>
</html>
